<template>
  <div class="app">
    <!-- <el-row>
      <el-col :offset="1" :span="22">
        <el-row :gutter="20">
          <CardVue :data="cardInfo"></CardVue>
          <CardVue :data="cardInfo"></CardVue>
          <CardVue :data="cardInfo"></CardVue>
        </el-row>
      </el-col>
    </el-row> -->

    <div class="common-layout">
      <el-container>
        <el-header>
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="10000" @click="goMenu">菜单</el-menu-item>
            <el-menu-item index="9999" @click="goHome">主页</el-menu-item>
            <div v-for="item in menuStore.menuList">
              <el-menu-item v-show="item.isFree && item.isMenu" :index="item.menuid">
                {{ item.menu }}
              </el-menu-item>
              <el-sub-menu v-show="item.isFree && !item.isMenu" :index="item.menuid">
                <template #title>{{ item.menu }}</template>
                <el-menu-item v-for="m in item.menuList" v-show="m.isFree" :index="m.menuid">{{ m.menu }}</el-menu-item>
              </el-sub-menu>
            </div>
          </el-menu>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts">
/*
import CardVue from '@/components/Card.vue';
import { Card, Desc } from './types/card';
import { reactive } from 'vue';
import { uuid } from '@/utils/util'
import { useRouter } from "vue-router"
const router = useRouter()

const desc = reactive<Desc>({
  desc: '屏蔽网上缴税菜单屏蔽网上缴税菜单屏蔽网上缴税菜单屏蔽网上缴税菜单屏蔽网上缴税菜单屏蔽网上缴税菜单屏蔽网上缴税菜单屏蔽网上缴税菜单',
  isFinish: true,
  project: ['ebank', 'ebank-vue']
})

const cardInfo = reactive<Card>({
  id: uuid(),
  title: '优惠利率数据库保存重复问题',
  project: ['ebank', 'company-transfer-online'],
  branch: ['202306_shieldTax9_wsb', '202306_inputExportTemplate_wsb'],
  desc: [desc, desc, desc],
  group: 'ebk1',
  isFinish: false,
  isRelease: false,
  isFlag: false
})

const sdfd = () => {
  router.push({
    name: 'cardPage'
  })
}
*/
import { onMounted, ref } from 'vue';
import { useMenuStore } from '@/stores/menuStore'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
const menuStore = useMenuStore()
const router = useRouter()

onMounted(() => {
  // menuStore.addMenu({
  //   menu: '待办事项',
  //   name: 'dototodo',
  //   url: 'dototodo',
  //   isMenu: true,
  //   menuList: []
  // })
  // menuStore.addMenu({
  //   menu: '过滤查询',
  //   isMenu: false,
  //   name: 'paramter',
  //   url: 'paramterQuery',
  //   menuList: []
  // })
  // menuStore.addMenu({
  //   menu: '字段过滤查询',
  //   name: 'paramterQuery1',
  //   url: 'paramterQuery/1',
  //   isMenu: true,
  //   menuList: []
  // }, '2')
})

// 激活的菜单索引
const activeIndex = ref(menuStore.currentMenu.menuid)
const handleSelect = (key: string) => {
  if (key === '10000') {
    // menu
    goMenu()
    menuStore.saveCurrentMenu({
      menuid: '10000',
      menu: 'menu',
      name: '菜单',
      url: '/menu',
      isMenu: true,
      menuList: []
    })
    return
  } else if (key === '9999') {
    // home
    goHome()
    menuStore.deleteCurrentMenu()
    return
  }
  let menu = menuStore.findMenu(menuStore.menuList, key)
  if (!menu) {
    ElMessage({
      dangerouslyUseHTMLString: true,
      message: '<strong><i>菜单【' + key + '</i>】不存在</strong>',
      type: 'error'
    })
    return
  }
  menuStore.saveCurrentMenu(menu)
  router.push({
    name: menu.name
  })
}

const goHome = () => {
  router.push({
    name: 'home'
  })
}

const goMenu = () => {
  router.push({
    name: 'menu'
  })
}
</script>

<style>
.app {
  min-width: 1200px;
}
</style>
